<template>
  <!--全部订单-->
  <div>

  <el-table
    v-loading="loading"
    element-loading-spinner="el-icon-loading"
    :data="orders" style="width: 100%">
    <el-table-column property="pid" label="订单编号" width="120"></el-table-column>
    <el-table-column property="users.uname" label="用户名称" width="120"></el-table-column>
    <el-table-column property="sumPrice" label="总价格"></el-table-column>
    <el-table-column property="orderDate" label="订单时间"></el-table-column>

    <el-table-column label="订单状态">
      <template slot-scope="scope">
        <el-tag type="success" v-if="scope.row.orderState=='o-2'">待提货</el-tag>
        <el-tag type="success" v-if="scope.row.orderState=='o-4'">全部商品退货</el-tag>
        <el-tag type="success" v-if="scope.row.orderState=='o-3'">已提货</el-tag>
        <el-tag type="success"  v-if="scope.row.orderState=='o-5'">订单完成</el-tag>
        <el-tag type="success"  v-if="scope.row.orderState=='o-8'">评价完成</el-tag>
        <el-tag type="success"  v-if="scope.row.orderState=='o-9'">全部商品退货中</el-tag>
      </template>
    </el-table-column>

    <el-table-column label="货物状态">
      <template slot-scope="scope">
        <el-tag type="success" v-if="scope.row.goodsState=='g-1'">等待发货</el-tag>
        <el-tag type="success" v-if="scope.row.goodsState=='g-2'">发货审核</el-tag>
        <el-tag type="success" v-if="scope.row.goodsState=='g-3'">等待接收</el-tag>
        <el-tag type="success" v-if="scope.row.goodsState=='g-4'">等待提货</el-tag>
        <el-tag type="success" v-if="scope.row.goodsState=='g-5'">等待用户确认收货</el-tag>
        <el-tag type="success" v-if="scope.row.goodsState=='g-6'">货物已经到用户手上</el-tag>
        <el-tag type="success" v-if="scope.row.goodsState=='g-9'">等待退货</el-tag>
        <el-tag type="success" v-if="scope.row.goodsState=='g-10'">退货结束</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot="header" slot-scope="scope">
        <el-button icon="el-icon-refresh-right" circle @click="a"></el-button>
      </template>
      <template slot-scope="scope">
      <el-link
      type="primary"
      @click="getOrderdetail(scope.row)"
      >查看详情
      </el-link>
      </template>
    </el-table-column>
  </el-table>
    <div>
  <!-- 分页 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageno"
    :page-sizes="[5, 10, 15, 20]"
    :page-size="pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>
    </div>
  <div>
    <component ref="viewdetails" is="orders_view_details"></component>
  </div>

  </div>
</template>

<script>
  import orders_view_details from "./orders_view_details";
    export default {
        name: "orderqueryAll",
      data(){
          return{
            orders:[],
            pageno: 1,
            pagesize: 5,
            orderState:'o-4',
            total: 1,
            Orderdetail:[],
            Orderdetails:{pId:""},
            loading: true
          }
      },
      methods:{
        getordersData(){
          var obj={
            loginUserId:sessionStorage.getItem("id"),
            pageno:this.pageno,
            pagesize:this.pagesize,
            orderState:this.orderState
          }
          this.$axios.get("QuerypartOrders.action",{params:obj}).then(res=>{
            this.orders=res.data.records;
            this.total=res.data.total;
            this.loading=false
          }).catch(error=>{this.$message.error(error)})
        },
        handleSizeChange(val) {
          //每页范围
          this.pagesize = val;
          this.getordersData();
        },
        handleCurrentChange(val) {
          //当前页
          this.pageno = val;
          this.getordersData();
        },
        getOrderdetail(row){
        this.$refs.viewdetails.dialogTableVisible=true;
        this.$refs.viewdetails.Orderdetails.pId=row.id
          this.$refs.viewdetails.getOrderdetailDetails()
        },
        a(){
          this.getordersData()
        }
      },
      created() {
          this.getordersData()
      },
      components:{
        orders_view_details
      }
    }
</script>

<style scoped>

</style>
